<template>
  <div class="address-manager">

    <div class="address-manager-header">
      <div class="address-manager-header-father-center">
        <div class="address-manager-header-date"
             @click="showDateDialog = !showDateDialog">{{this.selectedYear}}年{{this.selectedMonth}}月</div>

        <div class="address-manager-header-arrow-area"
             @click="showDateDialog = !showDateDialog">
          <div class="address-manager-header-arrow"
               :class="{'address-manager-header-arrow-up':showDateDialog}"></div>
        </div>
      </div>
      <div class="dividing-big"></div>
    </div>
    <div class="address-manager-list">
      <div class="address-manager-per"
           v-for="(item,index) in page.list">
        <div class="title">
          <div class="title-left">{{item.mname||item.nickname}}</div>
          <div class="title-right">{{item.finishdate}}</div>
        </div>

        <div class="dividing"></div>

        <div class="contain">
          <div class="contain-per"
               v-for="(itemList, indexList) in item.sublist">
            <div class="per-contain">
              <div class="per-left">
                <div class="img"><img :src="itemList.img"></div>
                <div class="info">
                  <div class="top">{{itemList.pdname}}</div>
                  <div class="bottom">{{itemList.psname}}</div>
                </div>
              </div>
              <div class="per-right">
                <div class="price"> {{orderData.psprice | math-money}}</div>
                <div class="num">×{{orderData.detailrnumber}}</div>
              </div>
            </div>
            <div class="dividing"></div>
          </div>
        </div>
        <div class="bottom-price">
          <span class="count">共{{orderData.totalnum}}件商品，
            <span class="price">{{orderData.orderamount | math-money}}</span> 收益：
            <span class="price">{{orderData.totalcommission | math-money}}</span>
          </span>
        </div>
        <div class="dividing-big"
             style="height:0.15rem"></div>
      </div>
      <span class="loadding-end"
            ref="end"
            v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

      <div class="loadding-up"
           v-if="(page.loading && page.more)&&page.list.length > 0">
        <div class="loadding-up-div"></div>
      </div>
    </div>
    <error-page :imgWidth="257"
                :imgHeight="295"
                top="95"
                emptyImg="empty-shopcat"
                :type="'text'"
                :zIndex="0"
                emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>您的客户还没订单哦...</span>"
  
                v-if="page.loaded === true && page.list.length === 0" />
    <month-choose :selectedMonth="selectedMonth"
                  :selectedYear="selectedYear"
                  @changeMonth="changeMonth"
                  @hideDialog="hideDialog"
                  :showType="showType"
                  v-if="showDateDialog"></month-choose>
  </div>
</template>
<style lang="stylus" scoped>
.address-manager {
  .address-manager-list {
    padding-top: 103px;

    .address-manager-per {
      .title {
        height: 83px;
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
        font-size: 28px;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        .title-left {
        }

        .title-right {
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
      }

      .contain {
        padding-left: 25px;
        padding-right: 25px;

        .contain-per {
          display: flex;
          flex-direction: column;

          .per-contain {
            display: flex;
            margin-top: 17px;
            margin-bottom: 25px;

            .per-left {
              display: flex;

              .img {
                width: 132px;
                height: 132px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .info {
                width: 386px;
                margin-left: 21px;
                font-size: 26px;
                height: 132px;
                color: rgba(51, 51, 51, 1);
                display: flex;
                flex-direction: column;

                .top {
                }

                .bottom {
                  flex: 1;
                  display: flex;
                  align-items: flex-end;
                }
              }
            }

            .per-right {
              display: flex;
              flex: 1;
              font-size: 26px;
              flex-direction: column;
              align-items: flex-end;

              .price {
                color: rgba(51, 51, 51, 1);
              }

              .num {
                flex: 1;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                color: rgba(102, 102, 102, 1);
              }
            }
          }
        }
      }

      .bottom-price {
        height: 83px;
        margin-right: 25px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .count {
          font-size: 26px;
          color: rgba(51, 51, 51, 1);

          .price {
            font-size: 28px;
            color: rgba(227, 20, 54, 1);
          }
        }
      }

      .dividing {
        width: 100%;
        height: 1px;
        background: RGBA(230, 230, 230, 1);
      }
    }
  }

  .address-manager-header {
    position: fixed;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;

    .address-manager-header-father {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 86px;

      .address-manager-header-date {
        margin-left: 33px;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
      }

      .address-manager-header-date-margin {
        margin-left: 0px;
      }

      .address-manager-header-img {
        background-image: url('~@image/icon-date.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        margin-right: 28px;
      }
    }

    .address-manager-header-father-center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 86px;
      width: 100%;

      .address-manager-header-date {
        margin-left: 133px;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
      }
    }
  }

  .dividing-big {
    height: 10px;
    width: 100%;
    background: rgba(245, 245, 245, 1);
  }

  .address-manager-header-arrow-area {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
  }

  .address-manager-header-arrow {
    background-image: url('~@image/arrow-down.png');
    background-size: 14px 8px;
    width: 14px;
    background-repeat: no-repeat;
    height: 8px;
  }

  .address-manager-header-arrow-up {
    background-image: url('~@image/arrow-up.png');
    background-size: 14px 8px;
    background-repeat: no-repeat;
    width: 14px;
    height: 8px;
  }
}
</style>

<script>
import ErrorPage from '@/components/error-page'
import MonthChoose from '@/components/month-choose'
import pageList from '@/components/common-js/page-list'
import mixins from '@/mixins'
export default {
  name: 'address-manager',
  data () {
    return {
      selectedYear: -1, // 选中的年
      selectedMonth: '', // 选中的月
      showDateDialog: false, // 打开与关闭年月选择器标记
      searchData: {
        finishdata: ''
      },
      showType: -1,
      url: '/tOrder/customOrderList.json',
      showBottom: 0,
      className: ['', 'verify-ing', 'verify-pass', 'verify-pass', 'verify-pass', 'verify-nopass'],
      classStatusStr: ['', '提现审核中', '审核通过', '审核通过', '审核通过', '审核不通过'],
      status: 2,
      showChargeDialog: false,
      wwid: '',
      ptmoney: 0
    }
  },
  mixins: [mixins, pageList],
  methods: {
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    },
    requestNet (isReset = false) {
      this.loadPageList(this.url, isReset)
    },
    initDate () {
      let date = new Date()
      // 设置年
      this.selectedYear = date.getFullYear()
      // 设置月
      let month = date.getMonth() + 1
      this.selectedMonth = month < 10 ? '0' + month : month + ''
      let dateData = `${this.selectedYear}-${this.selectedMonth}`
      this.searchData.finishdata = dateData
    },
    // 关闭年月选择器
    hideDialog () {
      this.showDateDialog = false
    },
    // 选择的年和月
    changeMonth (year, month) {
      this.selectedYear = year
      this.selectedMonth = month < 10 ? '0' + month : month + ''
      let date = `${this.selectedYear}-${this.selectedMonth}`
      this.searchData.finishdata = date
      // 关闭年月选择器
      this.hideDialog()
      this.requestNet(true)
    }
  },
  async mounted () {
    // 初始化年月
    this.initDate()
    await this.requestNet(true)
    this.pull()
  },
  components: {
    ErrorPage,
    MonthChoose
  }
}
</script>
